<template>
  <div>
    <van-tabs v-model:active="tabActiveInx" animated>
      <van-tab title="歌曲999">
        <!-- 歌曲列表 -->
        <div class="playListWrap">
          <ul v-for="(item, index) in playListData" :key="index">
            <li>{{ item.name }}</li>
            <li>{{ item.singer }}</li>
            <li>{{ item.album }}</li>
          </ul>
        </div>
      </van-tab>
      
      <van-tab title="最近收藏">暂无收藏</van-tab>
      <van-tab title="评论">无人评论</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "playList",
  data() {
    return {};
  },
  setup() {
    //tab切换按钮的inx
    const tabActiveInx = ref(0);
    //歌单的假数据
    let playListData = [
      {
        name: "a111",
        singer: "a222",
        // album专辑
        album: "a333",
      },
      {
        name: "b111",
        singer: "b222",
        album: "b333",
      },
      {
        name: "c111",
        singer: "c222",
        album: "c333",
      },
    ];

    return { tabActiveInx, playListData };
  },
};
</script>

<style scoped>
/* div.playListWrap {

} */
div.playListWrap ul{
  margin: 5px 0;
  height: 33px;
}
div.playListWrap ul li {
  float: left;
  width: 32%;
  margin-right: 5px;
  background: #eee;
}
</style>
